<template>
	<view class="houseRecom">
		<navBar isBack backColor="#000" background="#fff" color="#000" title="户型推荐"></navBar>
		<view class="recomNav">
			<view class="navItem" :class="{'active':navIndex==index}" v-for="(item,index) in navList" :key="index" @click="selectNav(item.num,index)">
				{{item.name}}
			</view>
		</view>
		
		<!-- 户型列表 -->
		<view class="houseList" v-if="houseList.length>0">
			<view class="item" @click="toDetail(item.id)" v-for="(item,index) in houseList" :key="index">
				<image :src="item.thumb_url[0].path" mode=""></image>
				<view class="itemText">
					<view class=" omit-1">
						{{item.house_type}} | {{item.area}}m²
					</view>
					<span>约{{item.sale_price}}万/套</span>
				</view>
			</view>
		</view>
		
		<view class="notList" v-else>
			<image :src="`${baseImg}/static/constr/notList.png`" mode=""></image>
			空空如也
		</view>
	</view>
</template>

<script>
	import service_oneN from '@/service/oneN.js'
	export default{
		data(){
			return{
				baseImg:'http://manager.ryz1620.com',
				navList:[{name:'全部',num:''},{name:'1室',num:1},{name:'2室',num:2},{name:'3室',num:3},{name:'4室',num:4}],
				bardRoomNum:'',
				navIndex:0,
				estate_id:null,
				houseList:[],
				page:1,
				pagesize:10
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id;
			this.getHouseList()
		},
		onReachBottom() {
			this.page++;
			uni.showLoading({
				title:'加载中...'
			})
			let params = {
				estate_id:this.estate_id,
				bedroom_num:this.bardRoomNum,
				page:this.page,
				pagesize:this.pagesize
			}
			service_oneN.getHouseList(params).then(res=>{
				console.log(res)
				if(res.code==1){
					if(!res.data.length){
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
						return
					}
					this.houseList = this.houseList.concat(res.data)
				}
			})
			setTimeout(function(){
				uni.hideLoading()
			},500)
		},
		methods:{
			// nav选择
			selectNav(num,index){
				console.log(num)
				this.navIndex = index
				this.bardRoomNum = num
				this.getHouseList()
			},
			
			// 获取户型列表
			getHouseList(){
				this.page = 1
				let params = {
					estate_id:this.estate_id,
					bedroom_num:this.bardRoomNum,
					page:this.page,
					pagesize:this.pagesize
				}
				service_oneN.getHouseList(params).then(res=>{
					console.log(res)
					if(res.code==1){
						this.houseList = res.data?res.data:[]
					}
				})
			},
			
			// 点击进入详情
			toDetail(id){
				uni.navigateTo({
					url:'./houseDetail?house_id='+ id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.houseRecom{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.recomNav{
			display: flex;
			align-items: center;
			padding: 40rpx 32rpx 20rpx 32rpx;
			.navItem{
				width: 84rpx;
				height: 48rpx;
				background-color: #F6F7FB;
				border-radius: 24rpx;
				font: 400 24rpx/48rpx PingFang SC;
				color: #939393;
				text-align: center;
				margin-right: 16rpx;
			}
			.active{
				background-color: #F9F6F3;
				color: #A58F6D;
			}
		}
		
		// 户型列表
		.houseList{
			padding: 40rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				margin-bottom: 16rpx;
				image{
					width: 334rpx;
					height: 334rpx;
					border-radius: 8rpx 8rpx 0 0;
				}
				.itemText{
					display: flex;
					flex-direction: column;
					padding: 20rpx 0 20rpx 16rpx;
					width: 334rpx;
					height: 126rpx;
					font: 500 30rpx/40rpx PingFangSC;
					color: #0A0605;
					span{
						font: 500 26rpx/40rpx PingFangSC;
						color: #C3AB7C;
						margin-top: 8rpx;
					}
				}
			}
		}
		
		// 没有数据
		.notList{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 426rpx;
			image{
				width: 426rpx;
				height: 356rpx;
				margin-bottom: 40rpx;
			}
			font:500 40rpx/56rpx PingFang SC;
			color: #333;
		}
	}
</style>
